<template>
    <h-section title="流程管理" collapse>
        <flexbox class="cell-item">
            <div class="font-w-b">版本研发流程：</div>
            <div class="primary-color cursor-pointer" @click="showFlowImg">查看流程图</div>
        </flexbox>
        <flexbox class="cell-item">
            <div class="cell-item-label">上线前团队长审核：</div>
            <div class="font-w-b">
                <a-switch v-model:checked="isLeaderAudit" @change="handleChange($event, 'isLeaderAudit')" />
            </div>
        </flexbox>
        <flexbox class="cell-item">
            <div class="cell-item-label">上线前校验变更工单：</div>
            <div class="font-w-b">
                <a-switch v-model:checked="isCheckWorkOrder" @change="handleChange($event, 'isCheckWorkOrder')" />
            </div>
        </flexbox>
    </h-section>
</template>

<script lang="ts">
import api from '@/api';
import { message } from 'ant-design-vue';
import { defineComponent, toRefs, getCurrentInstance, reactive } from 'vue';
export default defineComponent({
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const state = reactive<any>({
            isLeaderAudit: false,
            isCheckWorkOrder: false
        });
        const instance: any = getCurrentInstance();
        const showFlowImg = () => {
            const src = require(`@/assets/images/process/${state.isLeaderAudit ? 'processTwo' : 'processOne'}.png`);
            instance.proxy.$mitt.emit('previewImg', src);
        };
        const handleChange = async (val, field) => {
            state[field] = val;
            const { success, errorMsg } = await api.productDetailModel.shiftSystemSwitch({
                id: props.detail.id,
                isLeaderAudit: state.isLeaderAudit ? 1 : 0,
                isCheckWorkOrder: state.isCheckWorkOrder ? 1 : 0
            });
            if (!success) {
                message.error(errorMsg);
            }
        };
        state.isLeaderAudit = !!Number(props.detail.isLeaderAudit);
        state.isCheckWorkOrder = !!Number(props.detail.isCheckWorkOrder);
        return {
            ...toRefs(state),
            showFlowImg,
            handleChange
        };
    }
});
</script>
<style scoped lang="less">
.cell-item {
    font-size: 14px;
    margin-bottom: 8px;
    &-label {
        color: @caption-font-color;
    }
}
</style>